<template>
	<div class="avatar-root">
		
		<el-image
			class="image"
			:src="url" 
			fit="contain"
			:lazy="true">
		</el-image>
		
		<span class="list-control">
			<span class="list-control-preview"
				:style="{ marginRight: editble ? '10px':'0' }"
				@click="_handleUploadPreview()">
				<i class="el-icon-zoom-in"></i>
			</span>
			<span class="list-control-upload" v-if="editble">
				<input class="seclect-file" type="file" @change="_fileChange"/>
				<i class="el-icon-upload2"></i>
			</span>
		</span>
		
		<template v-if="preview">
		  <el-image-viewer :z-index="2000" :initial-index="0" v-if="showViewer" :on-close="_closeViewer" :url-list="previewSrcList"/>
		</template>
		
	</div>
</template>

<script>
	import  ElImageViewer from 'element-ui/packages/image/src/image-viewer';
	
	let prevOverflow = '';
	
	export default {
		name: 'LiloAvatar',
		components: {
			ElImageViewer
		},
		props: {
			src: {
				type: String,
				default: ''
			},
			editble: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				url: '',
				showViewer: false,
				previewSrcList: []
			};
		},
		computed: {
			preview() {
			  const { previewSrcList } = this;
			  return Array.isArray(previewSrcList) && previewSrcList.length > 0;
			}
		},
		mounted() {
			this.url = this.src;
		},
		methods: {
			_handleUploadPreview() {
				this.previewSrcList = [this.url];
			  // don't show viewer when preview is false
			  if (!this.preview) {
			    return;
			  }
			  // prevent body scroll
			  prevOverflow = document.body.style.overflow;
			  document.body.style.overflow = 'hidden';
			  this.showViewer = true;
			},
			_closeViewer() {
			  document.body.style.overflow = prevOverflow;
			  this.showViewer = false;
			},
			_fileChange(event){
				var file = event.target.files[0];
				if(window.FileReader){
					var fr = new FileReader();
					fr.readAsDataURL(file);
					fr.onloadend = () => {
						this.url = fr.result;
						this.$emit('change', file);
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-root {
		position: relative;
		overflow: hidden;
		height: 138px;
		// width: 138px;
		width: 100%;
		
		.image {
			height: 100%;
			width: 100%;
			border-radius: 6px;
			border: 1px solid #dcdfe6;
		}
		
		.list-control {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			cursor: default;
			text-align: center;
			color: #fff;
			opacity: 0;
			font-size: 20px;
			background-color: rgba(0, 0, 0, 0.6);
			transition: opacity .3s;
			border-radius: 6px;
			line-height: 136px;
			&:hover {
				opacity: 1;
			}
			
			.list-control-preview {
				cursor: pointer;
				position: relative;
			}
			
			.list-control-upload {
				cursor: pointer;
				position: relative;
				.seclect-file {
					position: absolute;
					top: 0px;
					width: 20px;
					opacity: 0;
				}
			}
			
			.filezise {
				position: absolute;
				font-size: 15px;
				color: white;
				bottom: 0;
				width: 100%;
			}
			
			.filename {
				position: absolute;
				font-size: 15px;
				color: white;
				top: 0;
				width: 100%;
				
				line-height: 20px;
				padding: 3px;
				
				// line-height: 40px;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				
				// white-space: nowrap;
				// text-overflow: ellipsis;
				// overflow: hidden;
				word-break: break-all;
			}
		}
	}
</style>
